<template>
  <div>
    <h3>ts-demo</h3>
    <button @click="minus(2)">-</button>
    <span>{{ count }}</span>
    <button @click="add">+</button>
    <p>{{ doubleCount }}</p>
    <Child :count="count" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, computed, watch } from "vue";
import Child from "./views/AppChild.vue";

export default defineComponent({
  components: {
    Child,
  },
  setup() {
    // const count = ref<number | string>(3);
    // const add = () => {
    //   count.value = "5";
    // };

    const count = ref<number>(3);
    const add = (): void => {
      count.value++;
    };
    const minus = (num: number) => {
      count.value -= num;
    };
    const doubleCount = computed<number>(() => {
      return count.value * 2;
    });
    watch(count, (val: number) => {
      console.log(val);
    });

    onMounted((): void => {
      console.log(123);
    });

    return {
      count,
      add,
      minus,
      doubleCount,
    };
  },
});
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
